<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
	<style>
		.box{width: 300px;height: 400px;margin:100px auto;position: relative;}
		.box div{
			width: 300px;
			height: 400px;
			position: absolute;
			backface-visibility: hidden;/*背面不可见*/
			transition: 2s;
		}
		.box div:nth-child(1){
			background:url(img/1.jpg);
			background-size: 100% 100%;
		}
		.box div:nth-child(2){
			text-align: center;
			line-height: 30px;
			font-weight: bold;
			color: white;
			background:rgba(100,100,100,0.8);
			transform: rotateY(180deg);
		}
		.box:hover div:nth-child(1){animation: run 2s 1 forwards;}
		/*.box:hover div:nth-child(2){animation: runn 2s 1 forwards;}*/
		@keyframes run{
			from{transform:rotateY(0deg);}
			to{transform: rotateY(180deg);}
		}
		@keyframes runn{
			from{transform:rotateY(180deg);}
			to{transform: rotateY(0deg);}
		}
	</style>
</head>
<body>
	<div class="box">
		<div></div>
		<div>
			<h2>资料</h2>
			<p>姓名：xxx</p>
			<p>性别：*</p>
			<p>年龄：**</p>
		</div>
	</div>
</body>
</html>